<script setup lang="ts">
	import { ApiNoteAdd, ApiNoteDelete, ApiNoteUpdate } from '@/api/note/note.ts';
	import type { NoteEntity } from '@/entity/note/NoteEntity.ts';
	import { useMessageConfirm } from '@/hooks/messageConfirm/useMessageConfirm.ts';
	import { Message } from '@arco-design/web-vue';
	import { pick } from 'lodash-es';
	import { defineExpose } from 'vue';
	import ContentEditor from '@/components/ContentEditor/ContentEditor';
	import { useCompRef } from '@/hooks/useComp.ts';
	import NoteAttachment from '@/views/note/detail/NoteAttachment.vue';

	const emit = defineEmits(['ok']);

	const tabsKey = ref(1);

	const visible = ref(false);

	const groupId = inject('groupId');

	const contentEditorRef: any = useCompRef(ContentEditor);

	const form = ref<NoteEntity>({});

	/**
	 * 添加笔记
	 */
	async function handleNote() {
		if (form.value.id) {
			await ApiNoteUpdate(pick(form.value, ['body', 'groupId', 'title', 'id']));
		} else {
			await ApiNoteAdd(pick(form.value, ['body', 'groupId', 'title']));
		}

		Message.success('操作成功');
		handleCancel();
		emit('ok');
	}

	/**
	 * 提交
	 */
	async function handleOk() {
		if (!form.value.title) {
			Message.error('请输入标题');
			return;
		}

		form.value.body = await contentEditorRef.value?.getContent();

		await handleNote();
	}

	async function handleDelete() {
		await ApiNoteDelete(form.value.id);
		Message.success('操作成功');
		emit('ok');
		handleCancel();
	}

	/**
	 * 取消
	 */
	const handleCancel = () => {
		visible.value = false;
	};

	/**
	 * 打开抽屉
	 * @param data
	 */
	function open(data?: NoteEntity) {
		if (data?.id) {
			form.value = {
				...form.value,
				...data,
				groupId,
			};
		} else {
			form.value = {
				body: '{}',
				id: null,
				groupId,
				title: '',
			};
		}
		visible.value = true;
	}

	defineExpose({
		open,
	});

	const computedId = computed(() => form.value.id);
</script>

<template>
	<a-drawer
		class="noteBookDetailAdd"
		:cancelButtonProps="{
			status: computedId ? 'danger' : 'normal',
		}"
		:cancel-text="computedId ? '删除' : '关闭'"
		title="添加笔记"
		:width="1000"
		:mask-closable="false"
		:visible="visible"
		@ok="handleOk"
		@cancel="
			(e: any) =>
				form.id && e.target.nodeName == 'BUTTON'
					? useMessageConfirm('error', {
							content: `确认要删除当前笔记本吗？`,
							onOk: () => handleDelete(),
						})
					: handleCancel()
		"
		unmountOnClose
	>
		<a-tabs
			:default-active-key="1"
			@change="(key: number) => (tabsKey = key)"
		>
			<a-tab-pane :key="1">
				<template #title>
					<i class="EachApp EachApp_wj-bjb mr-3px align-middle"></i>
					<span>笔记</span>
				</template>

				<!-- 标题 -->
				<div class="name h-80px border-b flex-center justify-start p-16px">
					<i class="EachApp EachApp_notes color-#ffd338 w-40px text-24px!"></i>

					<div class="flex flex-col w-full">
						<input
							v-model="form.title"
							placeholder="请输入标题"
							class="w-80% h-35px leading-35px border-none outline-none font-700 text-20px"
						/>
						<time
							class="color-#999 text-11px"
							v-if="form.id"
							>最后更新
							{{ form.createTime }}
						</time>
					</div>
				</div>

				<ContentEditor
					:defaultValue="form.body"
					ref="contentEditorRef"
				/>
			</a-tab-pane>
			<a-tab-pane
				:key="2"
				:disabled="!form.id"
			>
				<template #title>
					<i class="EachApp EachApp_fujian"></i>
					<span> 附件 </span>
				</template>

				<!-- 标题 -->
				<div class="name h-80px border-b flex-center justify-start p-16px">
					<i class="EachApp EachApp_notes color-#ffd338 w-40px text-24px!"></i>

					<div class="flex flex-col w-full">
						<input
							v-model="form.title"
							placeholder="请输入标题"
							class="w-80% h-35px leading-35px border-none outline-none font-700 text-20px"
						/>
						<time
							class="color-#999 text-11px"
							v-if="form.id"
							>最后更新
							{{ form.createTime }}
						</time>
					</div>
				</div>

				<NoteAttachment />
			</a-tab-pane>
		</a-tabs>
	</a-drawer>
</template>

<style lang="scss">
	.noteBookDetailAdd {
		.arco-drawer {
			.arco-drawer-body,
			.arco-tabs-content {
				padding: 0;
			}

			.arco-tabs-nav-tab-list {
				padding: 6px 0;
			}

			.arco-drawer-header {
				height: 60px;

				.arco-drawer-title {
					font-size: 14px;
				}
			}
		}
	}
</style>
